<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
	</head>

	<style>
		.ul{
			margin-left: 200px;
			margin-top: 0px;
			list-style: none; 
			width: 70%;
			height: 50px;
		    background-color: darkorange;
		}
		.li{
			height: 30px;
			float: left;
			margin-left: 30px;
			margin-top: 15px;
			font-size: 20px;
			background-color: darkkhaki;
		}
		#main{
			width: 72.7%;
			height: 550px;
			margin-left:200px;
			background-color: darkmagenta;
			margin-top: 0px;
		}
		#tab{
			/*background-color: aquamarine;*/
			height:50px;
		}
		.mo{
			float: left;
			width: 150px;
			height: 230px;
			margin-left: 59px;
			margin-top: 20px;
			/*background-color: magenta;*/
			
		}
		.movie{
			height: 210px;
			width: 150px;
			/*background-color: black;*/
			float: left;
		}
		
		.moviename{
			float: left;
			width: 150px;
			height: 20px;
			text-align: center;
			/*background-color: magenta;*/
		}
		#bottom{
			margin-left: 200px;
			width: 72.7%;
			height: 70px;
			background-color: salmon;
		}
		#page{
			float: left;
			width: 188px;
			height: 21px;
			background-color: lawngreen;
			margin-top: 18px;
			margin-left: 41.8%;
		}
		.pa{
			float: left;
		}
	</style>
	<body>
		<div id="all" style="background-color: navajowhite;">
			<div id="top" style="height:70px;width:72.7%;margin-left: 200px;background-color: brown;">
				<div style="text-align: center;font-size: 50px;margin-top: 20px">sky</div>
			</div>
			<div id="tab">
				<ul class="ul" >
					<li class="li" style="margin-left: 0px;">首页</li>
					<li class="li">筛选</li>
					<li class="li">最新上映</li>
					<li class="li">热门影院</li>
                    <li class="li">排序</li>
					<div style="float: left;margin-left: 50%;text-align: center">
						<div id="register" style="cursor: pointer;float: left;text-align: center" onclick="register()">注册&nbsp;</div>
						<div id="login" style="float: left;cursor: pointer;text-align: center" onclick="login()">登陆</div>
					</div>
				</ul>


			</div>
			<div id="main">
				<#list movieList as movie>
				<div class="mo" >
				<div class="movie" >
					<img  src="${movie.src!'img/000.jpg'}" style="width: 100%;height: 100%;" />
				</div>
				<div id="${movie.id}" class="moviename" onclick="getmovie(this.id)" style="cursor:pointer;">${movie.name!"暂无内容"}</div>
				</div>
				</#list>

				<div id="page">
					<a class="pa" onclick="Upage()" style="cursor: pointer">&nbsp;上一页&nbsp;&nbsp;&nbsp;&nbsp;</a><div  class="pa">第${page}页&nbsp;&nbsp;&nbsp;&nbsp;</div><a style="cursor: pointer" class="pa" onclick="Npage()">下一页</a>
				</div>
            </div>

			<div id="bottom">
				
			</div>
		</div>

		<script type="text/javascript">
			function getmovie(id) {
                window.location.href="findById/"+id;
            }
			function Upage() {
				var page="${page}";
                var j = parseInt(page);
                if(j>1) {
                    if (j >= 2) {
                        var i = j - 2;
                    }
                    window.location.href = "http://localhost:8085?page=" + i;
                }
            }
            function Npage() {
                var page="${page}";
                window.location.href="http://localhost:8085?page="+page;
            }
            function register() {
				
            }
            function login() {
				
            }
		</script>

	</body>
</html>
